<!-- 申领详情 -->
<template>
	<view>
		<view class="p-3">
			<view class="bt-block">
				<bg-title class="margin-top mx-3">
					<text class="font-14 font-normal">工资支付单</text>
				</bg-title>
				<view class="font-13 p-3">
					<bg-desc class="margin-bottom-lg" label="项目名称" :value="obj.projectName"></bg-desc>
					<bg-desc class="margin-tb-lg" label="姓名" :value="obj.userName"></bg-desc>
					<bg-desc class="margin-tb-lg" label="身份证号" :value="obj.idCardNo"></bg-desc>
					<bg-desc class="margin-tb-lg" label="手机号" :value="obj.phone"></bg-desc>
					<bg-desc class="margin-tb-lg" label="银行卡号" :value="obj.bankCardNo"></bg-desc>
					<bg-desc class="margin-tb-lg" label="开户行" :value="obj.bankName"></bg-desc>
					<bg-desc class="margin-tb-lg" label="工种" :value="obj.workJob"></bg-desc>
					<bg-desc class="margin-tb-lg" label="出勤" :value="obj.attendanceDays"></bg-desc>
					<bg-desc class="margin-tb-lg" label="日工资" :value="obj.daySalary"></bg-desc>
					<bg-desc class="margin-tb-lg" label="加班费" :value="obj.overtimeSalary"></bg-desc>
					<bg-desc class="margin-tb-lg" label="扣款项(劳保款)" :value="obj.workWearAmount"></bg-desc>
					<bg-desc class="margin-tb-lg" label="合计支付工资金额" :value="obj.salaryAmount"
						:valueStyle="{ 'color': '#EE3636' }"></bg-desc>
				</view>
			</view>
			<view class="bt-block mt-3">
				<bg-title class="margin-top mx-3">
					<text class="font-14 font-normal">本人确认签字</text>
				</bg-title>
				<view class="p-3">
					<u--image width="190" height="77" :src="obj.signedImg"></u--image>
				</view>
			</view>
			<!-- <view class="bt-block my-3" v-if="this.$auth.hasRoleOr(['fanance'])"> -->
			<view class="bt-block my-3">
				<bg-title class="margin-top mx-3">
					<text class="font-1">流程节点图</text>
				</bg-title>
				<view class="p-3">
					<bg-step :list="authList"></bg-step>
				</view>
			</view>
		</view>
		<view style="height: 200rpx;"></view>
		<view class="bt-footer bt-gap"
			v-if="obj.auditStatus == 1 && this.$auth.hasRoleOr(['team', 'project']) && obj.auditUserId == $store.getters.userId">
			<bg-btn plain @click="showReason = true">审批未通过</bg-btn>
			<bg-btn @click="audit(2)">审批通过</bg-btn>
		</view>
		<!-- 填写拒绝理由弹窗 -->
		<u-popup :show="showReason" @close="showReason = false" @open="showReason = true" :closeable="true" :round="10"
			mode="center">
			<view style="width: 720rpx; padding: 30rpx;">
				<view class="text-center font-15 font-bold mb-4">{{ '填写理由' }}</view>
				<u-textarea v-model="reason" placeholder="请输入拒绝理由"></u-textarea>
				<view class="bt-gap flex justify-around" style="margin-top: 60rpx;">
					<bg-btn @click="showReason = false"
						style="height:90rpx; color: #86898c;background-color: #fafafa; border: none;">取消</bg-btn>
					<bg-btn @click="ReasonConfirm" style="height:90rpx">确定</bg-btn>
				</view>
			</view>
		</u-popup>
	</view>

</template>

<script>
import { salaryDetail, salaryManagerAudit, salaryLeaderAudit } from '../../../api/salary'
export default {
	data() {
		return {
			id: '',
			authList: [],
			obj: {},
			// 拒绝弹窗
			showReason: false,
			reason: ''
		}
	},
	onLoad(options) {
		this.id = options.id
		this.getData()
	},
	methods: {
		getData() {
			salaryDetail(this.id).then(res => {
				this.obj = res.data
				this.authList = [{
					auditUserName: this.obj.userName,
					auditTime: this.obj.createTime
				},
				...this.obj.auditRecordList
				]
			})
		},
		// 审批接口 下午看
		audit(status) {
			let method = null
			if (this.$auth.hasRole("project")) {
				method = salaryManagerAudit
			} else if (this.$auth.hasRole("team")) {
				method = salaryLeaderAudit
			}
			if (method) {
				let obj = {
					id: this.id,
					status: status
				}
				if (status == 3) {
					obj.reason = this.reason
				}
				method(obj).then(res => {
					this.$modal.msg('审批成功')
					// uni.$emit("refresh-settle", true)
					uni.navigateBack()
					// this.$tab.navigateBackDelay()
				})
			}
		},
		ReasonConfirm() {
			if (this.reason.trim() == '') {
				this.$modal.msg('请输入拒绝理由')
				return
			}
			this.showReason = false
			this.audit(3)
		}
	}
}
</script>

<style></style>
